<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-date-picker
          v-model="value"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
    </div>
    <el-table ref="table" :height="this.$getTableHeight" :data="tableData" stripe border>
      <el-table-column show-overflow-tooltip prop="appName" label="APP名称" />
      <el-table-column show-overflow-tooltip prop="totalNumber" label="当日EC同步数" />
      <el-table-column show-overflow-tooltip label="下载页访问次数">
        <template slot-scope="scope">{{ scope.row.appCode ? scope.row.visits :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="downloadVolume" label="下载点击次数" />
      <el-table-column show-overflow-tooltip label="新增用户数(注册量 + 激活量)">
        <template slot-scope="scope">
          <p v-if="scope.row.appName" style="text-align:center">
            {{scope.row.registrationVolume + scope.row.activationQuantity}}
            ({{scope.row.registrationVolume?scope.row.registrationVolume:0}}
            + {{scope.row.activationQuantity?scope.row.activationQuantity:0}})
          </p>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="activity" label="活跃量（已注册 + 未注册）">
        <template slot-scope="scope">
          <p v-if="scope.row.appName" style="text-align:center;">
            {{scope.row.loginAccess + scope.row.noLoginAccess}}
            ({{scope.row.loginAccess?scope.row.loginAccess:0}}
            + {{scope.row.noLoginAccess?scope.row.noLoginAccess:0}})
          </p>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "~/components/commom/pagination";
import regular from "~/utils/regular";
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from "~/utils/util";
export default {
  components: {
    Pagination
  },
  watch: {
    value(nwd, o) {
      this.searchInfoMations.startTime = nwd[0];
      this.searchInfoMations.endTime = nwd[1];
    }
  },
  data() {
    return {
      totalCount: 0,
      tableData: [],
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      value: "",
      searchInfoMations: {
        startTime: "",
        endTime: ""
      },
      copySearchInfoMations: {
        startTime: "",
        endTime: ""
      }
    };
  },
  mounted() {
    this.getInitTableDate();
    this.value = [ this.getDay(-1, '-'), this.getDay(-1, '-')]
  },
  methods: {
    getDay(num, str) {
      var today = new Date();
      var nowTime = today.getTime();
      var ms = 24 * 3600 * 1000 * num;
      today.setTime(parseInt(nowTime + ms));
      var oYear = today.getFullYear();
      var oMoth = (today.getMonth() + 1).toString();
      if (oMoth.length <= 1) oMoth = "0" + oMoth;
      var oDay = today.getDate().toString();
      if (oDay.length <= 1) oDay = "0" + oDay;
      return oYear + str + oMoth + str + oDay;
    },
    getInitTableDate() {
      this.$post({
        url: "/summary/access/getAccessDetailsStatistics",
        data: {
          endTime: this.getDay(-1, '-'),
          startTime: this.getDay(-1, '-')
        }
      }).then(res => {
        this.totalCount = res.items.totalCount;
        this.tableData = res.items.items;
        changeTableHeight(this);
      });
    },
    searchInfoMation(res) {
      this.copySearchInfoMations = JSON.parse(
        JSON.stringify(this.searchInfoMations)
      );
      const result = _searchInfo(res, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    changeTableData(res) {
      const that = this;
      _changeTable("/summary/access/getAccessDetailsStatistics", res, that);
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    deleteInforMathion(row) {
      const that = this;
      _deleteMethods("/manage/label/deleteLabel", row, that).then(() => {
        that.searchInfoMation("no");
      });
    }
  }
};
</script>

<style>
.left {
  float: left;
}
.right {
  float: right;
}
</style>
